<template>
	<div class="goods-list">
		<!-- <router-link
			class="goodsitem"
			v-for="item in GoodsList"
			:key="item.id"
			:to="'/home/goodsinfo/' + item.id"
			tag="div"
		>
			<img :src="item.img_url" alt="" />
			<h1 class="title">{{ item.title }}</h1>
			<div class="info">
				<p class="price">
					<span class="now">{{ item.sell_price }}</span>
					<span class="old">{{ item.market_price }}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余:{{ item.stock_quantity }}</span>
				</p>
			</div>
		</router-link> -->
		<div class="goodsitem" v-for="item in GoodsList" :key="item.id" @click="goDetail(item.id)">
			<img :src="item.img_url" alt="" />
			<h1 class="title">{{ item.title }}</h1>
			<div class="info">
				<p class="price">
					<span class="now">{{ item.sell_price }}</span>
					<span class="old">{{ item.market_price }}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余:{{ item.stock_quantity }}</span>
				</p>
			</div>
		</div>

		<mt-button class="mu-addmore" type="danger" size="large" @click="getMore()">加载更多</mt-button>
	</div>
</template>
<script>
export default {
	data() {
		//data是自己组件内部，挂载的一些私有数据
		return {
			pageindex: 1, //分页的页数
			GoodsList: [], //存放商品列表的数组
		}
	},
	created() {
		this.getGoodsList()
	},
	methods: {
		getGoodsList() {
			this.$http.get('api/getgoods?pageindex=' + this.pageindex).then(result => {
				if (result.body.status === 0) {
					this.GoodsList = this.GoodsList.concat(result.body.message)
				}
			})
		},
		getMore() {
			this.pageindex++
			this.getGoodsList()
		},
		goDetail(id) {
			//路由导航
			//注意：this.$route:是路由参数对象，所有路由中的参数，params，query都属于它
			//this.$router是一个路由导航对象，用它可以方便的使用js代码，实现路由的前进和后退，跳转到新的url对象。

			//格式一： this.$router.push('/home/goodsinfo/' + id)
			//格式二： this.$router.push({ path: '/home/goodsinfo/' + id })
			//格式三，传递命名的路由,在路由中定义名称,在router.js中设置路由的名称，name定义
			console.log(this)
			this.$router.push({ name: 'goodsinfo', params: { id } })
		},
	},
}
</script>
<style lang="scss" scoped>
.goods-list {
	display: flex;
	flex-wrap: wrap;
	padding: 8px;
	justify-content: space-between;
}
.goodsitem {
	width: 49%;
	border: 1px solid #ccc;
	box-shadow: 0 0 8px #ccc;
	margin: 4px 0;
	padding: 2px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 293px;
	img {
		width: 100%;
	}
	.title {
		font-size: 14px;
	}
	.info {
		background-color: #eee;

		p {
			margin: 0;
			padding: 5px;
		}
		.price {
			.now {
				color: red;
				font-weight: bold;
				font-size: 16px;
			}
			.old {
				text-decoration: line-through;
				font-size: 12px;
				margin-left: 10px;
			}
		}
		.sell {
			display: flex;
			justify-content: space-between;
		}
	}
}
.mu-addmore {
	background-color: rgba(173, 20, 45, 0.5);
}
</style>
